Vue.directive('focus', {
  update: function(el) {
    el.focus()
  }
})
var vm = new Vue({
  el: '#todoapp',
  data: {
    tasks: [],
    newItem: '',
    editId: -1
  },
  created: async function() {
    var { data } = await axios.get('/todo/task');
    this.tasks = data;
  },
  methods: {
    toggleStatus: function(id, index) {
      axios.post('/todo/modifyTask', { _id: id, completed: this.tasks[index].completed });
    },
    addItem: async function() {
      var res = await axios.post('/todo/addTask', { title: this.newItem });
      if(res.status == 200) {
        this.tasks.push(res.data);
        this.newItem = '';
      }
    },
    removeItem: async function(id, index) {
      var res = await axios.get('/todo/deleteTask?_id=' + id);
      if(res.status == 200) {
        this.tasks.splice(index, 1);
      }
    },
    editItm: function(id) {
      this.editId = id;
    },
    saveItem: async function(id, index) {
      var result = await axios.post('/todo/modifyTask', { _id: id, title: this.tasks[index].title });
      console.log(result)
      if(result.status == 200) {
        this.tasks
        this.editId = -1;
      }
    }
  },
  computed: {
    total: function() {
      return this.tasks.filter(item => item.completed == false).length
    }
  }
})